<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
    >
      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
      </div>

      <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta>
            <a-avatar slot="avatar" size="large" shape="circle" :src="item.avatar"/>
            <a slot="title" class="adminName">{{ item.title }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="editAdmin(item)">编辑</a>
          </div>
          <div slot="actions">
            <a @click="deleteAdmin(item)">删除</a>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>添加时间</span>
              <p>{{ item.startAt }}</p>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </page-header-wrapper>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import TaskForm from './modules/TaskForm'
import AddForm from './modules/AddForm'
import EditForm from './modules/EditForm'
import DeleteForm from './modules/DeleteForm'
import Info from './components/Info'
const data = []
data.push({
  title: '管理员',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
  startAt: '2021-07-25 23:13'
})
data.push({
  title: '管理员',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
  startAt: '2021-07-26 22:44'
})
data.push({
  title: '管理员',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
  startAt: '2021-07-26 22:44'
})
data.push({
  title: '管理员',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
  startAt: '2021-07-26 22:44'
})
data.push({
  title: '管理员',
  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
  startAt: '2021-07-26 22:44'
})

export default {
  name: 'Workplace',
  components: {
    TaskForm,
    Info,
    AddForm,
    EditForm,
    DeleteForm
  },
  data () {
    return {
      data,
      status: 'all'
    }
  },
  methods: {
    add () {
      this.$dialog(AddForm,
        // component props
        {
          record: {},
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '新增',
          width: 700,
          centered: true,
          maskClosable: false
        })
    },
    editAdmin (record) {
      console.log('record', record)
      this.$dialog(EditForm,
        // component props
        {
          record,
          on: {
            ok () {
              console.log('ok1111 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '操作',
          width: 700,
          centered: true,
          maskClosable: false
        })
    },
    deleteAdmin (record) {
      console.log('record', record)
      this.$dialog(DeleteForm,
        // component props
        {
          record,
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '操作',
          width: 700,
          centered: true,
          maskClosable: false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
}
.adminName {
    height: 44px;
    display: flex;
    align-items: center;
}
.list-content {
  width: 48%;
  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
  }
}

</style>
